<!--下拉菜单，用于表头搜索居多-->
<style lang="less" scoped>
.dd {
  & .ivu-select-dropdown {
    max-height: 100% !important;
  }
  & .ivu-select-dropdown {
    max-height: 100% !important;
  }
  & > .ddm {
    text-align: left;
    font-weight: normal;
    & .active {
      color: #008cee;
    }
  }
}
</style>
<template>
<div class="dd">
    <Dropdown trigger="click" :placement="placement" @on-click="ddClick" transfer >
        <span v-if="content.length > 0" style="cursor:pointer">
            {{content}}
            <Icon type="md-arrow-dropdown" v-if="showArrow"/>
        </span>
        <Icon type="plus" v-else style="cursor:pointer"></Icon>
        <DropdownMenu slot="list" class="ddm">
            <DropdownItem v-for="(item, index) in data" :key="index" :name="item.value"
                :style="{color:localChoosedItem == item.value ? activeColor:defaultColor}">{{item.name}}</DropdownItem>
            <slot name="diy"></slot> <!--可用于插入自己定义的下拉菜单-->
        </DropdownMenu>
    </Dropdown>
</div>
</template>
<script>
export default {
  data () {
    return {
      activeColor: '#008cee',
      defaultColor: '#495060',
      localChoosedItem: ''
    }
  },
  props: {
    placement: {
      type: String,
      default: 'bottom-start' // 定义下拉菜单的位置
    },
    showArrow: {
      type: Boolean,
      default: false // 是否显示向下的icon
    },
    content: {
      type: String,
      default: '' // 下拉菜单的中文
    },
    data: {
      type: Array,
      default: () => {
        return []
      } // 下拉菜单的子项
    },
    choosedItem: {
      type: String,
      default: 'all'
    } // 当前选择项
  },
  watch: {
    choosedItem: {
      immediate: true,
      handler (newv, oldv) {
        this.localChoosedItem = newv
      }
    }
  },
  created () {},
  methods: {
    ddClick (name) {
      this.$emit('on-choosed', name)
      this.localChoosedItem = name
    }
  }
}
</script>

